<template>
  <div class="wrap">
    <div class="header">
      <div class="banner">
        <van-swipe @change="onChange" :autoplay="3000">
          <van-swipe-item
            id="swipe-item"
            v-for="(item, index) in dataList.bannerImgs"
            :key="index"
          >
            <img :src="item" class="images" />
          </van-swipe-item>
        </van-swipe>
        <template>
          <div class="custom-indicator">{{ current + 1 }}/{{ swiperCont }}</div>
        </template>
      </div>
    </div>
    <div class="main">
      <div class="title">
        <p class="price">￥{{ dataList.goodsPrice }}</p>
        <p class="ity">{{ dataList.goodsName }}</p>
      </div>
      <div class="details">
        <div class="prode" @click="showPopup">
          <div class="left">规格</div>
          <div class="middle">{{ defaultSkuInfo }}</div>
          <div class="right">
            <img src="../../../assets/images/presale/geng.png" class="images" />
          </div>
        </div>
        <!-- 商品规格 -->
        <van-popup
          v-model="show"
          round
          position="bottom"
          :style="{ height: '80%' }"
        >
          <div class="dialog">
            <div class="dialog-title">
              <div class="title-img">
                <div id="images">
                  <img :src="dialog_arry.img" />
                </div>
              </div>
              <div class="text">
                <p id="text-str">{{ dialog_arry.goodsName }}</p>
                <p id="text-prc">
                  ￥<span id="price">{{ dialog_arry.price }}</span>
                </p>
              </div>
            </div>
            <div class="category-title">
              <p>类别</p>
            </div>
            <div class="category">
              <div
                v-for="(item, index) in dialogData"
                :key="index"
                :class="[{ active: isActive == index }, 'cateList']"
                @click="btnLog(item, index)"
              >
                {{ item.skuName }}
              </div>
            </div>
            <div class="number">
              <div id="title">数量</div>
              <div id="count_box">
                <div id="add">
                  <img
                    src="../../../assets/images/presale/add.png"
                    id="images"
                  />
                  <!-- @click="add_button" -->
                </div>
                <div id="number_text">{{ count }}</div>
                <div id="reduce">
                  <img
                    src="../../../assets/images/presale/reduce.png"
                    id="images"
                  />
                  <!-- @click="reduce_button" -->
                </div>
              </div>
            </div>
            <div class="button_box">
              <van-button
                round
                type="info"
                id="button_sure"
                @click="button_sure"
                >确认</van-button
              >
            </div>
          </div>
        </van-popup>
        <div class="address">
          <div class="left">服务</div>
          <div class="middle">
            正品保障
            <span class="line">|</span>
            支持7天无理由退货
          </div>
          <div class="right"></div>
        </div>
      </div>
      <div class="introduce">
        <div class="introduce-title">
          <div class="lines"></div>
          <div class="text">商品介绍</div>
        </div>
        <div class="introduce-img">
          <div
            class="images"
            v-for="(item, index) in dataList.pageImgs"
            :key="index"
          >
            <img :src="item" class="img" />
          </div>
        </div>
      </div>
      <div class="buttons">
        <van-button round type="info" class="btns" @click="btnPress">
          立即预约
        </van-button>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>
<script>
import { share } from "@/js/public";
import { Dialog } from "vant";
import { shopDetail, goodsSkuDetail } from "@/api/presale/productDetails";

export default {
  data() {
    return {
      share: true,
      // 当前轮播图片位置
      current: 0,
      // 是否显示弹窗
      show: false,
      // 商品数量
      count: "1",
      isActive: 0,
      // 轮播图
      dataList: [],
      swiperCont: "",
      // 商品规格id
      defaultSkuId: "",
      // 主页传过来的商品id
      activityid: "",
      // 弹窗数据
      dialogData: [],
      dialog_arry: "",
      // 商品规格
      defaultSkuInfo: "",
      // 主页传过来的预约登记的ID
      activityGoodsId: "",
      router_query: "",
    };
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  mounted() {
    share({
      title: "2周年庆典幸运大转盘",
      desc: "中奖名单出炉！快来康康一等奖花落谁家~",
      imgUrl: "https://download.yuanfuda933.com/h5/images/announcementh.png",
      shareUrl:
        "https://download.yuanfuda933.com/h5/other2.html#/productDetailsh",
      share: this.share,
    });
    this.shopDetailGet();
    this.goodsSkuDetailGet();
  },
  created() {
    console.log("this.$route.query.id", this.$route.query);
    this.router_query = this.$route.query;
    this.activityid = this.$route.query.goodsId;
    this.activityGoodsId = this.router_query.id;
  },
  methods: {
    // 获取指定商品详情
    shopDetailGet() {
      const id = this.activityid;
      shopDetail(id)
        .then((res) => {
          if (res.data.code == 200) {
            this.dataList = res.data.data;
            // 轮播图数量
            this.swiperCont = this.dataList.bannerImgs.length;
            // 默认商品规格
            this.defaultSkuInfo = res.data.data.defaultSkuInfo;
          } else {
            console.log("error，接口请求失败！");
          }
        })
        .catch((err) => {
          console.log("接口出错", err);
        });
    },
    // 获取指定商品规格列表
    goodsSkuDetailGet() {
      const id = this.activityid;
      goodsSkuDetail(id)
        .then((res) => {
          if (res.data.code == 200) {
            this.dialogData = res.data.data;
            // 默认选中第一个商品规格
            this.dialog_arry = res.data.data[0];
            this.defaultSkuId = res.data.data[0].id;
          } else {
            console.log("error，接口请求失败！");
          }
        })
        .catch((err) => {
          console.log("接口出错", err);
        });
    },
    onChange(index) {
      this.current = index;
    },
    // 弹窗
    showPopup() {
      this.show = true;
    },
    // 选中类别
    btnLog(item, index) {
      this.isActive = index;
      // 切换选中的商品
      this.dialog_arry = item;
      this.defaultSkuId = item.id;
      console.log("item", item);
    },
    // 点击增加商品
    add_button() {
      this.count++;
    },
    // 点击减商品
    reduce_button() {
      if (this.count <= 0) {
        // console.log(this.count);
      } else {
        this.count -= 1;
      }
    },
    // 确认所选规格
    button_sure() {
      this.show = false;
      // 更改商品规格
      this.defaultSkuInfo = this.dialog_arry.skuName;
      this.$router.push({
        path: "/registration",
        query: {
          defaultSkuId: this.defaultSkuId,
          count: this.count,
          activityGoodsId: this.activityGoodsId,
        },
      });
      // if (this.count == "0") {
      //   Dialog.alert({
      //     message: "请先选择商品数量",
      //     theme: "round-button",
      //     confirmButtonColor:
      //       "linear-gradient(313deg, #a1008c 0%, #ff005e 100%)",
      //   });
      // } else {
      //   this.show = false;
      // }
    },
    // 立即预约
    btnPress() {
      this.show = true;
    },
  },
};
</script>
<style lang="less" scoped>
.wrap {
  overflow: hidden;
  width: 100%;
  font-family: Arial, Helvetica;
  font-size: 14px;
  background-color: #f2f2f2;
  .header {
    width: 100%;
    background: #ffffff;
    padding-top: 41px;
    padding-bottom: 15px;
    .banner {
      width: 315px;
      margin: 0 auto;
      #swipe-item {
        width: 315px;
        height: 315px;
        .images {
          width: 315px;
          height: 315px;
        }
      }
      .custom-indicator {
        width: 28px;
        height: 17px;
        background: #222222;
        border-radius: 9px;
        opacity: 0.27;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        line-height: 20px;
        margin: 10px 300px;
      }
    }
  }
  .main {
    width: 100%;
    .title {
      width: 359px;
      min-height: 117px;
      background: #ffffff;
      border-radius: 5px;
      margin: 0 auto;
      padding-left: 19px;
      padding-bottom: 15px;
      .price {
        font-size: 24px;
        color: #ff301e;
        text-align: left;
        padding-top: 16px;
      }
      .ity {
        font-size: 18px;
        color: #1e2022;
        text-align: left;
      }
    }
    .details {
      width: 379px;
      background: #ffffff;
      border-radius: 5px;
      margin: 0 auto;
      margin-top: 10px;
      .prode {
        min-height: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 14px;
        border-bottom: 1px solid #f6f6f6;
        padding: 15px 15px;
        position: relative;
        .left {
          color: #b2b2b2;
        }
        .middle {
          padding-left: 24px;
          color: #100f0f;
        }
        .right {
          width: 18px;
          height: 4px;
          position: absolute;
          right: 22px;
          top: 20px;
          .images {
            width: 18px;
            height: 4px;
          }
        }
      }
      .address {
        height: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 14px;
        padding: 15px 15px;
        .left {
          color: #b2b2b2;
        }
        .middle {
          padding-left: 24px;
          color: #100f0f;
          .text {
            color: #b2b2b2;
          }
        }
      }
    }
    .introduce {
      width: 379px;
      // min-height: 684px;
      padding-bottom: 20px;
      background: #ffffff;
      margin: 0 auto;
      margin-top: 11px;
      border-radius: 5px;
      .introduce-title {
        height: 51px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .lines {
          height: 51px;
          width: 5px;
          height: 15px;
          background: #f80464;
          border-radius: 3px;
          margin-left: 9px;
        }
        .text {
          font-size: 15px;
          color: #1e2022;
          margin-left: 9px;
        }
      }
      .introduce-img {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .images {
          // width: 379px;
          // height: 400px;
          margin-top: -3px;
        }
      }
    }
    .buttons {
      width: 100%;
      height: 77px;
      background: #ffffff;
      position: fixed;
      bottom: 0;
      .btns {
        width: 102px;
        height: 36px;
        background: linear-gradient(313deg, #a1008c 0%, #ff005e 100%);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
        border-radius: 18px;
        margin: 19px 288px;
        border: 0;
      }
    }
  }
  .footer {
    width: 100%;
    height: 80px;
  }
}
.dialog {
  width: 100%;
  .dialog-title {
    width: 92%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 15px;
    .title-img {
      width: 89px;
      height: 91px;
      background: red;
      margin: 26px 17px;
      #images {
        width: 89px;
        height: 91px;
      }
    }
    .text {
      display: flex;
      flex-direction: column;
      font-weight: bold;
      padding-left: 10px;
      #text-str {
        color: #1e2022;
        font-size: 18px;
      }
      #text-prc {
        color: #ff301e;
        font-size: 14px;
        margin-top: -2px;
        #price {
          font-size: 24px;
        }
      }
    }
  }
  .category-title {
    font-size: 16px;
    width: 92%;
    height: 18px;
    margin: 0 auto;
  }
  .category {
    width: 76%;
    padding-left: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    .cateList {
      min-width: 142px;
      min-height: 28px;
      border-radius: 5px;
      background: #f2f2f2;
      text-align: center;
      font-size: 12px;
      color: #3e3e3e;
      margin-top: 20px;
      line-height: 28px;
      padding-left: 5px;
      padding-right: 5px;
    }
    .active {
      color: #ffffff;
      background: #f80464;
    }
  }
  .number {
    width: 92%;
    margin: 0 auto;
    padding: 10px 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 50px;
    #title {
      width: 50px;
      font-size: 16px;
    }
    #count_box {
      min-width: 90px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      #add {
        width: 30px;
        height: 31px;
      }
      #number_text {
        font-size: 14px;
        padding-left: 10px;
        padding-right: 10px;
      }
      #reduce {
        width: 30px;
        height: 31px;
      }
    }
  }
  .button_box {
    width: 277px;
    height: 41px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 20px;
    #button_sure {
      width: 277px;
      height: 41px;
      background: linear-gradient(313deg, #a1008c 0%, #ff005e 100%);
      border-radius: 21px;
      border: 0;
    }
  }
}
</style>